<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--1、引入vue.js-->
    <script src="./js/vue.js"></script>
    <style>
        /*当前哪一个按钮被选中了，修改样式*/
        .current-btn{
            background-color: pink;
        }
    </style>
</head>
<!--拼接遵循的原则：外双（“”）内单{“ ‘’ + ‘’ + ‘’ ”}-->
<!--通过点击获取索引进行联动-->
<body >
    <!--2、创建视图-->
    <div id="app" :style="'background:'+ colorList[currentIndex]">
        <!--vue中以数据作为驱动-->
        <!--需求：点击对应按钮，出现对应数据-->
        <!--item代表每一项，list标签总项,i代表当前索引，从0开始-->
        <!--点击事件 v-on：click 简写为  @click-->
        <button :class="currentIndex===i?'current-btn':''" v-for="(itme,i) in list" @click="tab(i)">按钮{{i+1}}</button>
        <!--展示需要显示的数据-->
        <div>
        {{currentData}}
        </div>
    </div>
</body>
</html>
<!--3、创建Vue实列-->
<script>
    new Vue({
        el:'#app',
        data(){
            return{
                //定义list数组
                list:[
                    {
                        text:"新闻列表1"
                    },
                    {
                        text:"新闻列表2"
                    },
                    {
                        text:"新闻列表3"
                    },
                ],
                //用来存放当前需要显示的数据
                currentData:{
                    text:"新闻列表1"
                },
                currentIndex:0,
                colorList:["seashell","silver","brown"]
            }
        },
        methods:{
            tab(index){
                //赋值
                //访问data对象中的变量使用this。
                //通过索引获取到list数组的一项
                this.currentData = this.list[index]
                //将当前按钮所点击的索引进行赋值
                this.currentIndex = index
            }       
        }         
    })
</script>